/**
 * @desc: 退货物流单号管理
 * @author: fj
 */
import React, { useState, useEffect } from 'react';
import SearchContent from './component/SearchContent';
import FormContent from './component/FormContent';
import TableList from './component/TableList';
import FooterToolbar from '@/components/FooterToolbar';
import EditNoteModal from './component/EditNoteModal';
import CommonPage from '@/components/CommonPagination';
import CommonLoading from '@/components/CommonLoading';
import { handleExportExcel } from '@/utils/utils.jsx';
import moment from 'moment';
import { cloneDeep } from 'lodash';
import { stringify } from 'qs';
import { queryPageList } from './service';
import { Button, message } from 'antd';
import styles from './index.module.less';

const ReceiptReturn = () => {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState({});
  const [visible, setVisible] = useState(false); //备注弹窗visible
  const [record, setRecord] = useState({}); //单行选择的数据
  //分页数据
  const [pagination, setPagination] = useState({
    current: 1,
    total: 0,
    pageSize: 10,
  });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    getPageList(query, pagination);
  }, [query]);

  // 查询退货物流单号列表接口
  const getPageList = async (query, pagination) => {
    setLoading(true);
    setData([]);
    const { success, data = {} } = await queryPageList({
      ...query,
      current: pagination.current,
      size: pagination.pageSize,
      timeStart: query.time
        ? moment(query.time[0]).format('YYYY-MM-DD HH:mm:ss')
        : undefined,
      timeEnd: query.time
        ? moment(query.time[1]).format('YYYY-MM-DD HH:mm:ss')
        : undefined,
      time: undefined,
    });
    if (success) {
      const { records = [], total = 0 } = data;
      setData(records);
      setPagination({
        ...pagination,
        total,
      });
    }
    setLoading(false);
  };

  //导出功能
  const exportExcel = () => {
    const { total } = pagination;
    if (total) {
      const nums = Math.ceil(total / 10000);
      message.info(`即将为您导出${nums}张Excel，请稍候...`);
      setLoading(true);
      const params = { ...query };
      if (params.time) {
        params.timeStart = query.time
          ? moment(query.time[0]).format('YYYY-MM-DD HH:mm:ss')
          : undefined;
        params.timeEnd = query.time
          ? moment(query.time[1]).format('YYYY-MM-DD HH:mm:ss')
          : undefined;
        params.time = undefined;
      }
      params.current = 1;
      // params.size = 10000;
      const handleExport = () => {
        handleExportExcel(
          `/zjf-wms/refundlogistics/exportExcel?${stringify(params)}`,
          '退货物流单号.xlsx',
          commonCallback
        );
      };
      const commonCallback = () => {
        params.current++;
        if (params.current <= nums) {
          message.info(`总计${nums}张，即将为您导出第${params.current}张`);
          handleExport();
        }
        setLoading(false);
      };
      handleExport();
    } else {
      message.info('暂无可导出的数据！');
    }
  };

  const SearchContentProps = {
    query,
    handleSearch(val) {
      setQuery(val);
    },
    handleReset() {
      setQuery({});
    },
  };

  //新增区域
  const FormContentProps = {
    handleOk() {
      getPageList(query, pagination);
    },
  };

  const TableListProps = {
    data: data,
    editNote(record) {
      setRecord(record);
      setVisible(true);
    },
  };

  //修改备注
  const EditNoteModalProps = {
    visible,
    record,
    handleOk() {
      getPageList(query, pagination);
      setVisible(false);
      setRecord({});
    },
    handleCancel() {
      setVisible(false);
      setRecord({});
    },
  };

  // 分页组件数据
  const PageProps = {
    pagination,
    handleChange(current, pageSize) {
      setPagination({
        ...pagination,
        current,
        pageSize,
      });
      getPageList(query, { ...pagination, current, pageSize });
    },
  };

  return (
    <div className="zjf-container">
      <SearchContent {...SearchContentProps} />
      <div style={{ marginBottom: '20px', marginTop: '14px' }}>
        <Button
          shape="round"
          className="newRoundBtn"
          onClick={() => exportExcel()}
        >
          表格导出
        </Button>
      </div>
      <div className={styles.contentBox}>
        <div className={styles.contentLeft}>
          <FormContent {...FormContentProps} />
        </div>
        <div className={styles.contentRight}>
          <TableList {...TableListProps} />
        </div>
      </div>
      <FooterToolbar>
        <CommonPage {...PageProps} />
      </FooterToolbar>
      {visible && <EditNoteModal {...EditNoteModalProps} />}
      <CommonLoading loading={loading} />
    </div>
  );
};

export default React.memo(ReceiptReturn, () => {
  return true;
});
